// Foundation for Sites by ZURB
// foundation.zurb.com
// Licensed under MIT Open Source

////
/// @group abide
////

/// 设置是否将错误样式应用到输入框中
/// @type Boolean
$abide-inputs: true !default;

/// 是否将错误样式应用到标签中
/// @type Boolean
$abide-labels: true !default;

/// 值无效时文本输入框的背景颜色
/// @type Color
$input-background-invalid: get-color(alert) !default;

/// 值无效时标签的颜色
/// @type Color
$form-label-color-invalid: get-color(alert) !default;

/// 错误文本颜色
/// @type Color
$input-error-color: get-color(alert) !default;

/// 错误文本的字体大小
/// @type Number
$input-error-font-size: rem-calc(12) !default;

/// 错误文本的字体粗细
/// @type Keyword
$input-error-font-weight: $global-weight-bold !default;

/// 设置文本输入框有错误时的背景颜色和边框
///
/// @param {Color} $background [$alert-color] - 用于背景和边框的颜色
/// @param {Number} $background-lighten [10%] - 背景颜色的亮度等级
@mixin form-input-error(
  $background: $input-background-invalid,
  $background-lighten: 10%
) {
  &:not(:focus) {
    border-color: $background;
    background-color: mix($background, $white, $background-lighten);

    &::placeholder {
      color: $background;
    }
  }
}

/// 使用配置文件中的值将错误样式添加到表单元素。
@mixin form-error {
  display: none;
  margin-top: $form-spacing * -0.5;
  margin-bottom: $form-spacing;

  font-size: $input-error-font-size;
  font-weight: $input-error-font-weight;
  color: $input-error-color;
}

@mixin foundation-form-error {
  @if $abide-inputs {
    // Error class for invalid inputs
    .is-invalid-input {
      @include form-input-error;
    }
  }

  @if $abide-labels {
    // Error class for labels of invalid outputs
    .is-invalid-label {
      color: $form-label-color-invalid;
    }
  }

  // Form error element
  .form-error {
    @include form-error;

    &.is-visible {
      display: block;
    }
  }
}
